<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>新增保养单</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="cancel">返回</el-button>
      </div>

      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="设备" prop="equipmentId">
              <el-select v-model="form.equipmentId" placeholder="请选择设备" style="width: 100%">
                <el-option
                  v-for="item in equipmentOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="保养类型" prop="maintenanceType">
              <el-select v-model="form.maintenanceType" placeholder="请选择保养类型" style="width: 100%">
                <el-option
                  v-for="dict in maintenanceTypeOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="计划开始日期" prop="planStartDate">
              <el-date-picker
                v-model="form.planStartDate"
                type="date"
                placeholder="选择日期"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="计划结束日期" prop="planEndDate">
              <el-date-picker
                v-model="form.planEndDate"
                type="date"
                placeholder="选择日期"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="负责人" prop="maintainerName">
              <el-input v-model="form.maintainerName" placeholder="请输入负责人" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="保养计划" prop="planId">
              <el-select v-model="form.planId" placeholder="请选择保养计划" style="width: 100%">
                <el-option
                  v-for="item in planOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="保养项目" prop="items">
          <el-table :data="form.items" border style="width: 100%">
            <el-table-column prop="itemName" label="保养项目" width="180" />
            <el-table-column prop="standard" label="标准" width="180" />
            <el-table-column label="结果">
              <template slot-scope="scope">
                <el-select v-model="scope.row.result" placeholder="请选择结果">
                  <el-option label="正常" value="1" />
                  <el-option label="异常" value="0" />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="备注">
              <template slot-scope="scope">
                <el-input v-model="scope.row.remark" placeholder="请输入备注" />
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>

        <el-form-item label="保养备注" prop="remark">
          <el-input v-model="form.remark" type="textarea" rows="3" placeholder="请输入保养备注" />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { addMaintenanceRecord } from "@/api/sb/maintenanceRecord";
import { getMaintenancePlanList } from "@/api/sb/maintenanceRecord";
import { getEquipmentList } from "@/api/sb/maintenanceRecord";

export default {
  name: 'AddMaintenanceRecord',
  data() {
    return {
      // 表单参数
      form: {
        equipmentId: '',
        maintenanceType: '',
        planStartDate: '',
        planEndDate: '',
        maintainerName: '',
        planId: '',
        items: [],
        remark: ''
      },
      // 设备选项
      equipmentOptions: [],
      // 保养类型选项
      maintenanceTypeOptions: [
        { dictLabel: '日常保养', dictValue: '0' },
        { dictLabel: '周期保养', dictValue: '1' },
        { dictLabel: '临时保养', dictValue: '2' }
      ],
      // 保养计划选项
      planOptions: [],
      // 表单校验
      rules: {
        equipmentId: [
          { required: true, message: '请选择设备', trigger: 'change' }
        ],
        maintenanceType: [
          { required: true, message: '请选择保养类型', trigger: 'change' }
        ],
        planStartDate: [
          { required: true, message: '请选择计划开始日期', trigger: 'change' }
        ],
        planEndDate: [
          { required: true, message: '请选择计划结束日期', trigger: 'change' }
        ],
        maintainerName: [
          { required: true, message: '请输入负责人', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getEquipmentOptions();
    this.getPlanOptions();
  },
  methods: {
    // 获取设备选项
    getEquipmentOptions() {
      getEquipmentList().then(response => {
        const equipmentList = response.rows || response.data || [];
        this.equipmentOptions = equipmentList.map(item => {
          return {
            id: item.equipmentId || item.id,
            name: `${item.equipmentName} - ${item.equipmentCode}`
          };
        });
      });
    },
    // 获取保养计划选项
    getPlanOptions() {
      getMaintenancePlanList().then(response => {
        const planList = response.rows || response.data || [];
        this.planOptions = planList.map(item => {
          return {
            id: item.planId || item.id,
            name: item.planName
          };
        });
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          addMaintenanceRecord(this.form).then(response => {
          this.$modal.msgSuccess("新增成功");
          this.cancel();
          }).catch(error => {
            console.error("保存保养单失败", error);
          });
        }
      });
    },
    /** 取消按钮 */
    cancel() {
      this.$router.push({ path: "/sb/Maintenance-sheet" });
    }
  }
}
</script> 